<template>
	<view>
		<view class="tabbar">
			<view class="tabbar-item" v-for="(item,index) in list" :key="index" @click="changeTab(index)">
				<view class="select" v-if="index == 1">
					<!-- 中间tab样式 -->
					<view class="i-t position">
						<image class="img imgactive" mode="widthFix" :src="item.selectedIconPath"
							v-if="current == index"></image>
						<image class="img imgactive" mode="widthFix" :src="item.iconPath"
							v-else></image>
						<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
						<view class="text active" v-if="current == index">{{item.text}}</view>
						<view class="text" v-else>{{item.text}}</view>
					</view>
				</view>
				<view v-else>
					<image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image>
						<image class="img " mode="widthFix" :src="item.iconPath"
							v-else></image>
					<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
					<view class="text active" v-if="current == index">{{item.text}}</view>
					<view class="text" v-else>{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tab_bar",
		props: ['current'],
		data() {
			return {
				list: [{
						"pagePath": "pages/exchange/index",
						"iconPath": require("@/static/img/tabBar/1-002.png"),
						"selectedIconPath": require("@/static/img/tabBar/1-001.png"),
						"text": "兑换"
					},
					{
						"pagePath": "pages/home/index",
						"iconPath": require("@/static/img/tabBar/2-002.png"),
						"selectedIconPath": require("@/static/img/tabBar/2-001.png"),
						"text": "集章册"
					},
					{
						"pagePath": "pages/my/index",
						"iconPath": require("@/static/img/tabBar/3-002.png"),
						"selectedIconPath": require("@/static/img/tabBar/3-001.png"),
						"text": "我的"
					}
				]

			}
		},

		methods: {
			changeTab(e) {
				uni.navigateTo({
					url: '/' + this.list[e].pagePath,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		font-size: 1.2vh;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		padding: 10rpx 0;
		// 处理自定义tabBar不同机型的高度
		height: calc(98upx + constant(safe-area-inset-bottom));
		height: calc(98upx + env(safe-area-inset-bottom));
	}

	.tabbar-item {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.img {
		height: 3vh;
		width: 3vh;
		margin: 0 4vw;
	}

	.text {
		text-align: center;
		color: #8B8B8B;
		font-size: 24rpx;
	}

	.i-t {
		font-size: 1.2vh;
		padding: 2vw 0vh 0;
	}

	.select {
		border-radius: 10vh;
		margin-bottom: 6vh;
		// margin-bottom: 1vh;
	}

	.imgactive {
		height: 3.5vh;
		width: 7vh;
		// width: 3.5vh;
		margin: 0 2.2vw;
	}

	.text.active {
		color: #000;
	}
</style>
